<template>
  <div>
  <div id="top">
    <div id="topBar">
      <router-link :to="{path:'/me'}"><van-icon name="arrow-left" style="float: left;margin-top: 0.5rem;margin-left: 0.5rem"/>
        <p style="float: left">我的券</p></router-link>
      <router-link :to="{ path:'/me/ticket/ticketIntro'}"><p style="float: right;color: #39a9ed;margin-right: 0.5rem" >使用说明</p></router-link>
    </div>
  </div>
    <van-coupon-list
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      :disabled-coupons="disabledCoupons"
      @change="onChange"
      @exchange="onExchange"
      close-button-text="立即使用"
      :show-close-button="false"
    />
    <div id="use">立即使用</div>
  </div>
</template>

<script>
  const coupon = {
    available: 1,
    condition: '无使用门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元'
  };

  export default {
        name: "ticket",
    data() {
      return {
        chosenCoupon:-1,
        coupons: [coupon,coupon],
        disabledCoupons: [coupon]
      }
    },
    methods: {
      onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
      },
      onExchange(code) {
        this.coupons.push(coupon);
      }
    }
    }
</script>

<style scoped>
  #top{
    width: 100%;
    height:3rem;

    overflow: hidden;
    position: relative;
  }
  #topBar{
    height: 2rem;
    width: 100%;
    line-height: 2rem;
    color:black;
    font-size: 1rem;
    margin-top: 1rem;
  }
  #topBar p{
    display: inline-block;
  }
  #use{
    height: 3rem;
    width: 80%;
    line-height: 3rem;
    font-size: 1rem;
    background: #ee0a24;
    color: white;
    border-radius: 1rem;
    margin: 0 auto;
  }
</style>
